<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的基本使用</title>
  </head>

  <body>
    <div id="container">
      <h2>在{{msg}}听歌</h2>
      <button v-on:click="showInfo1">不传参数</button>
      <br>
      <button v-on:click="showInfo2(msg)">传递参数，但是没有$event</button>
      <h3>传递event，必须要有$event占位</h3>
      <button v-on:click="showInfo3($event,msg)">传递参数，有$event</button>

    </div>

  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
    事件处理:
      1.不传参数，打印event，就是事件对象
      2.传递一个参数，没传$event：打印的是传递的参数，undefined
      3.传递两个参数,用$event做占位符:打印出来：事件对象，网易云
    
    */
    const vm = new Vue({
      el: "#container",
      data: {
        msg: '网易云'
      },
      methods: {
        showInfo1(event) {
          console.log(event); //事件对象
        },
        showInfo2(msg, e) {
          console.log(msg, e); //网易云,undefined
        },
        showInfo3(event, msg) {
          console.log(event, msg); //事件对象，网易云
        }
      }
    })
  </script>

</html>